import React, { Component } from 'react';
import { connect } from 'dva';

import moment from 'moment';

import { Card, Badge, Table, DatePicker, Icon, Divider, Button } from 'antd';

import DescriptionList from '@/components/DescriptionList';
import StandardTable from '@/containers/StandardTable';

import { userIntegrals as columns } from '@/commons/columns';

import styles from './Integrals.less';

const { Description } = DescriptionList;

@connect(({ userIntegral, loading }) => ({
  userIntegral,
  loading: loading.effects['userIntegral/fetch'],
}))
class UserIntegrals extends Component {

  state = {
    selectedRows: [],
    formValues: {}
  }

  componentDidMount() {
    const { queryRow = {}, dispatch } = this.props;
    dispatch({
      type: 'userIntegral/fetch',
      payload: { userId: queryRow.id }
    });
  }

  columns = [...columns];

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { queryRow = {}, dispatch } = this.props;
    const { formValues } = this.state;

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const params = {
      userId: queryRow.id,
      from: pagination.current,
      size: pagination.pageSize,
      ...formValues,
      ...filters,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }

    dispatch({
      type: 'userIntegral/fetch',
      payload: params,
    });
  };

  render() {
    const { queryRow = {}, userIntegral, loading } = this.props;
    const { selectedRows } = this.state;
    const { data } = userIntegral;
    return (
      <Card bordered={false}>
        <DescriptionList size="large" title="幸运草详情" style={{ marginBottom: 16 }}>
          <Description term="用户昵称">{queryRow.nickname}</Description>
          <Description term="首次登录时间">{moment(queryRow.createdAt).format('YYYY-MM-DD HH:mm')}</Description>
          <Description term="最近登录时间">{moment(queryRow.updatedAt).format('YYYY-MM-DD HH:mm')}</Description>
          <Description term="当前幸运草数量">{queryRow.amount}</Description>
          <Description term="总获得幸运草数">{queryRow.totalIn}</Description>
          <Description><Button type="primary" icon="download">EXCEL</Button></Description>
        </DescriptionList>
        <StandardTable
          loading={loading}
          data={data}
          bordered={true}
          size="small"
          columns={this.columns}
          onChange={this.handleStandardTableChange}
          rowSelection={null}
        />
      </Card>
    );
  }
}

export default UserIntegrals;